<template>
  <!-- <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large"> -->
  <!-- <a-row :gutter="20"> -->
  <a-col :span="24">
    <a-form-model-item label="下发区县市网信办" :span="12">
      <div style="text-align: right;margin-bottom: 8px;">
        <a-button type="primary" @click="showModalApi('departIdList')">选择对象</a-button>
      </div>
      <div style="margin: 8px 0;">
        <a-tag closable @close="deleteUser(item, 'departIdList')" v-for="(item) in deptId.departIdList.selectedRow" :key="item.depart">{{ item.depart }}</a-tag>
      </div>
      <a-textarea :rows="5" v-model.lazy="form.askContent" placeholder="请输入内容" @blur="change"></a-textarea>
    </a-form-model-item>
    <a-form-model-item label="下发市级部门" :span="12">
      <div style="text-align: right;margin-bottom: 8px;">
        <a-button type="primary" @click="showModalApi('departIdList2')">选择对象</a-button>
      </div>
      <div style="margin: 8px 0;">
        <a-tag closable @close="deleteUser(item, 'departIdList2')" v-for="(item) in deptId.departIdList2.selectedRow" :key="item.depart">{{ item.depart }}</a-tag>
      </div>
      <a-textarea :rows="5" v-model.lazy="form.askContent2" placeholder="请输入内容" @blur="change"></a-textarea>
    </a-form-model-item>

    <a-modal v-model="showModal" width="700px">

      <div class="line-title-head"><span>接受对象</span></div>
      <div style="margin: 8px 0;">
        <a-space>
          <a-input allowClear style="width: 160px" v-model="params.depart" placeholder="请输入部门名称"></a-input>
          <a-button type="primary" @click="getList">筛选</a-button>
        </a-space>
      </div>

      <h-table
        ref="htable"
        @init="getList"
        :config="config"
        showRowSelection
        :showHeadBgNone="false"
        :zebraStripes="false"
        :dataAll="dataAll"
        @select="select">
        <!-- <span slot="action" slot-scope="{record}"><a style="color: #1F3B8A" @click="editScore(record)">编辑</a></span>
<span slot="isOut">
{{ '所属部门' }}
</span> -->
      </h-table>

      <template slot="footer">
        <a-button key="back" type="primary" @click="showModal = false;submit()">
          确 定
        </a-button>
      </template>
    </a-modal>
  </a-col>

  <!-- </a-row> -->

  <!-- </a-form-model> -->
</template>

<script>
import moment from 'moment';
import { address } from '@/api/serve';
import { getIsOutDepart } from '@/api/dept';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    // departId: {
    //   type: [String, Number],
    //   defalut: ''
    // },
    id: {
      type: String,
      defalut: ''
    },
    describe: {
      type: String,
      defalut: ''
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {

  },
  computed: {

  },
  data() {
    return {
      showModal: false,
      deptType: '0',
      departId: [],
      address: [],
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        scroll: {
          y: 250,
          x: false
        },
        columns: [
          {
            align: 'center',
            title: '所属部门',
            dataIndex: 'depart'
            // width: 300
          },
          {
            align: 'center',
            title: '接收人',
            dataIndex: 'realname'
            // width: 300
          }
        ],
        pagination: false
      },
      moment,
      show: false,
      deptArr: [],
      dept: [],
      form: {

      },
      params: {
        // address: undefined,
        // depart: ''
      },
      rules: {
        askContent1: [{ required: true, message: '请输入' }],
        askContent2: [{ required: true, message: '请输入' }],
        state: [{ required: true, message: '请选择' }]
      },
      selectedRow: [],
      dataAll: [],
      options: [
        { label: '区县市网信办', value: 1 },
        { label: '市级部门', value: 2 }
      ],
      deptId: {
        departIdList: {
          deptId: [],
          selectedRow: []
        },
        departIdList2: {
          deptId: [],
          selectedRow: []
        }
      },
      departType: ''
    };
  },
  created() {
    // this.getList(true);
    this.getAddress();
  },
  methods: {
    getAddress() {
      address().then(res => {
        this.address = res.data;
      });
    },
    select({ selectedRowKeys, selectedRow }) {
      this.deptId[this.departType].deptId = selectedRowKeys;
      this.deptId[this.departType].selectedRow = selectedRow;

      // this.$set(this.deptId[this.departType], 'selectedRow', this.dataAll.filter(e => selectedRowKeys.includes(e.id)));

      this.change();
    },
    change() {
      this.$emit('change', {
        ...this.form,
        departIdList: this.deptId.departIdList.deptId,
        departIdList2: this.deptId.departIdList2.deptId
      });
    },
    getList(showAll) {
      getIsOutDepart({
        isOut: this.deptType,
        eventId: this.id,
        ...this.params
      }).then(res => {
        this.config.dataSource = res.data;
        if (showAll === true) {
          this.dataAll = res.data;
        }
      });
    },
    edit(formData) {
      this.form = cloneDeep(formData);
    },
    // change() {
    //   this.getList();
    // },
    deleteUser({ id }, departType) {
      const indexs = this.deptId[departType].selectedRow.findIndex(e => e.id == id);
      if (indexs > -1) {
        this.deptId[departType].selectedRow.splice(indexs, 1);
        this.deptId[departType].deptId.splice(indexs, 1);
        console.log('[update departId]', this.deptId[departType].deptId);
        // this.$refs.htable.selectedRowKeys.splice(indexs, 1);
        this.$refs.htable.update(this.deptId[departType].deptId);
      }

      this.change();
    },
    submit() {
      console.log(this.form, this.deptId);

      this.change();
    },
    showModalApi(type) {
      this.departType = type;
      this.showModal = true;
      this.deptType = type == 'departIdList' ? '0' : '1';
      this.$nextTick(() => {
        this.$refs.htable.refresh();
        this.$refs.htable.update(this.deptId[this.departType].deptId);
      });
    }
  }
};
</script>

<style>
.btn-custom {
  /* position: absolute;
  right: 20px;
  z-index: 222;
  color: #00a2aa; */
}
.sss {
  position: absolute;
  right: 0;
  top: -125px;
}
.sss1 {
  position: absolute;
  right: 90px;
  top: -125px;
}
</style>
